<template>
  <view class="search-container">
    <input
      type="text"
      v-model="searchData"
      placeholder="搜索关键词进行搜索"
      class="search-input"
    />
  </view>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
let searchData = ref("");
// 定义事件发射器
const emit = defineEmits<{
  (e: "search", value: string): void;
  (e: "update:modelValue", value: string): void;
}>();

// 监听输入变化并触发事件
watch(searchData, (newValue) => {
  emit("search", newValue);
  emit("update:modelValue", newValue);
});
</script>
<style scoped>
.search-container {
  height: 60rpx;
  background-color: #f5f5f5;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
}

.search-input {
  flex: 1;
  height: 100%;
  font-size: 28rpx;
  outline: none;
  background: transparent;
}
</style>
